/**
 * 合成事件
 */

import React from 'react'
import './index.css'

class DemoTwo extends React.Component {
  state = {
    arr: [10, 20, 30]
  }

  render() {
    return <div>
      <div className="outer center" onClick={() => {
        console.log('outer 冒泡 [合成]')
      }} onClickCapture={() => {
        console.log('outer 捕获 [合成]')
      }}>
        <div className="inner" onClick={(ev) => {
          console.log('ev: ', ev);
          console.log(ev.nativeEvent.composedPath());
          ev.stopPropagation()
          console.log('inner 冒泡 [合成]')
        }} onClickCapture={() => {
          console.log('inner 捕获 [合成]')
        }}></div>
      </div>
    </div>
  }


  componentDidMount() {
    let root = document.getElementById('root'),
      inner = document.querySelector('.inner'),
      outer = document.querySelector('.outer')

    root.addEventListener('click', (ev) => {
      console.log('root 冒泡 [原生]')
    })
    root.addEventListener('click', (ev) => {
      console.log('root 捕获 [原生]')
    }, true)

    inner.addEventListener('click', (ev) => {
      console.log('inner 冒泡 [原生]')
    })
    inner.addEventListener('click', (ev) => {
      console.log('inner 捕获 [原生]')
    }, true)

    outer.addEventListener('click', (ev) => {
      console.log('outer 冒泡 [原生]')
    })
    outer.addEventListener('click', (ev) => {
      console.log('outer 捕获 [原生]')
    }, true)

    let body = document.body

    body.addEventListener('click', () => {
      console.log('body 冒泡 [原生]');
    })
    body.addEventListener('click', () => {
      console.log('body 捕获 [原生]');
    }, true)
  }

}

export default DemoTwo